import React, {useState} from 'react';
import style from './index.module.scss'
import axios from "src/utils/request";

import {actions} from "../../../redux/slice/userSlice";
import {store} from "../../../redux/store";
import localStoreHelper from "../../../utils/LocalStoreHelper";

function Login(props) {
    let [phone, setPhone] = useState("");
    let [password, setPassword] = useState("");
    let [loginBtnActive, setLoginBtnActive] = useState(true)

    return (
        <div className={style.container}>
            <p className={style.title}>登录</p>
            <div>
                <label className={style.label}>Login</label>
                <input value={phone} onChange={(val) => setPhone(val.target.value)} type="text" className={style.input}
                       type={"text"} placeholder={"手机号"}/>
            </div>
            <div>
                <label className={style.label}>Password</label>
                <input value={password} onChange={(val) => setPassword(val.target.value)} type="password"
                       className={style.input} type={"password"} placeholder={"密码"}/>
            </div>
            <button className={style.loginButton} onClick={login} disabled={!loginBtnActive}>登录</button>
        </div>
    );

    async function login() {
        console.log(phone, password)
        setLoginBtnActive(false)
        let res = await axios.post("/login/cellphone", {
            phone: phone,
            password: password
        }).finally(() => {
            setLoginBtnActive(true)
        })
        if(res.status === 200 && res.data.code === 200){
            //redux
            store.dispatch(actions.login({user:res.data}))
            localStoreHelper.setItem('user',res.data);
            props.destroy();
        }
        console.log(res)
        console.log(actions)

    }
}

export default Login;